<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn" :style="type=='none'?'padding:1px 0px;':''">
      <el-dropdown
        trigger="click"
        ref="DropdownComponent"
        placement="bottom-start"
        @command="addType"
        v-if="isShowAddDropdown"
        >
        <!-- 一期只有trigger后面添加按钮 -->
        <!-- v-if="type != 'placeHolder'&&type != 'none'" -->  
        <div class="add-app-btn"><i class="iconfont icon-add2" /></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item 
            class="add-app-choice" 
            command="app"
          >
            <i class="iconfont icon-fdn-guanlianbiaodan"/>
            执行事件
          </el-dropdown-item
          >
          <el-dropdown-item class="add-app-choice" command="message"
            ><i class="iconfont icon-xiaoxi" />发送消息</el-dropdown-item
          >
          <el-dropdown-item class="add-app-choice" command="code" v-if="isShowCode">
            <i style="font-size: 10.4px">&lt;/&gt;</i>
            执行代码
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
/* utils */
import { uuid } from 'pub-bbx-utils'
import _ from 'lodash'
import { isEmpty } from '@src/util/type';
import { getAllGrayInfo } from '@src/util/grayInfo'

// 子级限制数量 (暂定)
const ChildrenMaxLength = 1

export default {
  props: [ 'childNodeP', 'type'],
  name: 'add-node',
  data() {
    return {
      visible: false,
      isShowCode: false,
    };
  },
  inject:['getParent'],
  created() {
    getAllGrayInfo().then(res => {
      this.isShowCode = res?.TRIGGER_CODE;
    })
  },
  computed: {
    /** 
     * @description 子级节点列表
    */
    childNodes() {
      return this.childNodeP?.childNodes || []
    },
    /** 
     * @description 判断子级是否有执行应用
    */
    isChildHaveExecuteApp() {
      return (
        this.childNodes.some((item) => {
        
          const itemChildNodes = item?.childNodes || []
          
          return itemChildNodes.some((item) => item.type == 3)
          
        })
      )
    },
    /** 
     * @description 是否显示添加应用按钮
     * -- 目前只支持对应一个执行应用
    */
    isShowAddAppBtn() {
      return !this.isChildHaveExecuteApp
    },
    /** 
     * @description 子级是否达到限制数量
    */
    isChildrenMaxLength() {
      return this.childNodes.length >= ChildrenMaxLength
    },
    /** 
     * @description 是否显示添加按钮下拉框
    */
    isShowAddDropdown() {
      // 只有选择了触发器触发方式才显示执行应用 或者消息节点/执行代码选择了数据
      return this.childNodeP?.data?.bizActionCode || this.childNodeP?.data?.bizTypeId || (this.childNodeP?.type === 4 && !isEmpty(this.childNodeP.data) || (this.childNodeP?.type === 6 && !isEmpty(this.childNodeP.data)))
    }
  },
  methods: {
    addType(type) {
      const that = this
      let newUuid = uuid()
      let data = {};
      if (type == 'app') {
        data = {
          name: '',
          logo: '',
          bizType: '',
          bizTypeId: '',
          executeAction: {
            action: '',
            apiId: '',
            executeMethod: 2,
            insertFieldOptions: [],
            deleteFieldOptions: [],
            updateFieldOptions: {
              select: [],
              update: []
            }
          }
        }
      }
      let condition = {
        nodeName: this.$t('common.base.condition'),
        type: 2,
        uniqueId:newUuid,
        id:null,
        parentId:this.childNodeP.uniqueId,
        getParent:that.getParent,
        isEdit:false,
        data: {
          name:'',
          conditionList:[[]]
        },
        childNodes: [{
          nodeName: type == 'app' ? '执行事件' : type == 'message' ? '发送消息' : '执行代码',
          type: type == 'app' ? 3 : type == 'message' ? 4 : 6,
          id:null,
          uniqueId:uuid(),
          parentId:newUuid,
          getParent: that.getParent,
          isEdit:false,
          childNodes: [],
          data,
        }]
      };
      const childNodeP = this.childNodeP
      childNodeP.childNodes.push(condition);
      this.$emit('update:childNodeP', this.childNodeP);
    },
    /** 
     * @description 打开下拉菜单
     * -- 支持外部调用
    */
    openDropdown() {
      this.$refs.DropdownComponent?.handleClick()
    }
  },
};
</script>
<style scoped lang="scss">
.add-node-btn-box {
  width: 240px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: #cacaca;
  }

  .add-node-btn {
    user-select: none;
    width: 240px;
    padding: 20px 0;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;

    .btn {
      outline: none;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      width: 30px;
      height: 30px;
      background: #3296fa;
      border-radius: 50%;
      position: relative;
      border: none;
      line-height: 30px;
      -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

      .iconfont {
        color: #fff;
        font-size: 16px;
      }

      &:hover {
        transform: scale(1.3);
        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
      }

      &:active {
        transform: none;
        background: #1e83e9;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.add-node-popover-body {
  display: flex;

  .add-node-popover-item {
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    color: #191f25 !important;

    .item-wrapper {
      user-select: none;
      display: inline-block;
      width: 80px;
      height: 80px;
      margin-bottom: 5px;
      background: #fff;
      border: 1px solid #e2e2e2;
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

      .iconfont {
        font-size: 35px;
        line-height: 80px;
      }
    }

    &.approver {
      .item-wrapper {
        color: #ff943e;
      }
    }

    &.notifier {
      .item-wrapper {
        color: #3296fa;
      }
    }

    &.condition {
      .item-wrapper {
        color: #15bc83;
      }
    }

    &:hover {
      .item-wrapper {
        background: #3296fa;
        box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
      }

      .iconfont {
        color: #fff;
      }
    }

    &:active {
      .item-wrapper {
        box-shadow: none;
        background: #eaeaea;
      }

      .iconfont {
        color: inherit;
      }
    }
  }
}
</style>
